<template>
  <div>
    <div class="header">
				<!-- <div class="header-center">足球数据</div> -->
        <div class="header-left iconfont" @click="navBack">&#xe623;</div>
        <div class="header-cen">
          <div class="cen-cn1" :class="{active:selected=='用户'}" @click="choose('用户')">用户</div>
          <div class="cen-cn2" :class="{active:selected=='话题'}" @click="choose('话题')">话题</div>
        </div>
				<div class="header-right" @click="clear()">清空</div>
			</div>
    <div class="container">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id='用户'>
            <Cell :followList=followList></Cell>
          </mt-tab-container-item>
          <mt-tab-container-item id='话题'>
            <mt-navbar v-model="selected2">
              <mt-tab-item id="1" ><div class="selected-tit" :class="{select:selected2=='1'}">图文</div></mt-tab-item>
              <mt-tab-item id="2" ><div class="selected-tit" :class="{select:selected2=='2'}">视屏</div></mt-tab-item>
              <mt-tab-item id="3" ><div class="selected-tit" :class="{select:selected2=='3'}">文字</div></mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected2">
              <mt-tab-container-item id="1">
                1
              </mt-tab-container-item>
              <mt-tab-container-item id="2">
                <div>2</div>
              </mt-tab-container-item>
              <mt-tab-container-item id="3">
                <div>3</div>
              </mt-tab-container-item>
            </mt-tab-container>
          </mt-tab-container-item>
        </mt-tab-container> 
    </div>
    
  </div>
</template>
<script>
import {TabContainer, TabContainerItem,Navbar, TabItem } from "mint-ui";
import Cell from '../../components/cell'
export default {
  name: "community",
  components: {
    mtTabContainer:TabContainer,
    mtTabContainerItem:TabContainerItem,
    mtNavbar:Navbar,
    mtTabItem:TabItem,
    Cell
  },
  data: function() {
    return {
      selected:'用户',
      selected2:'1',
      followList:[{title:'发现圈子',imgUrl:'/static/imgs/faxian.png',content:'用户介绍用户介绍用户介绍'},{title:'国际米兰',imgUrl:'/static/imgs/guojimilan.png',content:'用户介绍用户介绍用户介绍'},
        {title:'利物浦',imgUrl:'/static/imgs/liwupu.png',content:'用户介绍用户介绍用户介绍'},{title:'中超',imgUrl:'/static/imgs/zhongchao2.png',content:'用户介绍用户介绍用户介绍'},
        {title:'曼联',imgUrl:"/static/imgs/manlian.png",content:'用户介绍用户介绍用户介绍'}
      ],
    };
  },
  methods: {
    choose(e){
      this.selected=e;
    },
    navBack(){
        this.$router.go(-1);
    },
    clear(){
      console.log(1)
    }
  }
};
</script>
<style lang="less" scoped>
@import '~styles/header.less';
img{
  width: 100%;
  height: 100%;
}
.line-h{
    width: 100%;
    height: .11rem;
    background: #F5F8FB;
}
.header-cen{
  width: 2.6rem;
  margin-left: 50%;
  height: 1rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cen-cn1,.cen-cn2{
    color: #fff;
    font-size: .36rem;
  }
  .active{
    font-size: .4rem;
    font-weight: 600;
  }
}
.container{
  margin-bottom: 1.33rem;
  margin-top: 1rem;
  width: 100%;
  .banner{
    padding: .18rem .18rem .06rem .23rem;
    border-radius: .12rem;
    overflow: hidden;
  }
}

</style>